<template>
  <div id="bg">
    <div id="login">
      <div ref="rcHeight" class="l-content1">
        <h2 class="animate__animated animate__fadeInDown">
          智能制造车间数据处理与可视化系统
        </h2>
        <el-form
          ref="loginForm"
          status-icon
          :model="loginForm"
          :rules="loginRules"
          class="loginForm animate__animated animate__fadeIn animate__delay-1s"
        >
          <el-form-item prop="userId">
            <i class="el-icon-user" style="margin-right: 20px" />
            <el-input
              v-model="loginForm.userId"
              style="margin: 50px 0 0 0"
              placeholder="您的账号"
            />
          </el-form-item>
          <el-form-item prop="password">
            <i class="el-icon-key" style="margin-right: 20px" />
            <el-input
              v-model="loginForm.password"
              style="margin: 10px 0 0 0"
              placeholder="您的密码"
              show-password
            />
          </el-form-item>
          <div
            id="buttons"
            class="animate__animated animate__fadeInUp animate__delay-1.5s"
          >
            <el-button round @click="registerDialogVisible = true"
              >注册</el-button
            >
            <el-button
              type="primary"
              round
              style="margin-left: 20px"
              @click="login"
              >登录</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="r-content1">
        <div id="rc">
          <el-carousel :height="rcHeight + 'px'" :interval="5000">
            <el-carousel-item v-for="item in imgUrl" :key="item.id">
              <img
                :src="item.idView"
                class="rcImg"
                style="height: 100%; width: 100%"
                @load="imgLoad"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <el-dialog
      ref="registerDialog"
      title="欢迎注册"
      :visible.sync="registerDialogVisible"
      width="30%"
      center
      :before-close="handleRegisterClose"
      :close-on-click-modal="false"
      class="registerDialog"
    >
      <el-form
        ref="registerForm"
        class="registerForm"
        :model="registerForm"
        status-icon
        :rules="registerRules"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="用户名" prop="userId">
          <el-input v-model="registerForm.userId" />
        </el-form-item>
        <el-form-item label="密码" prop="password" autocomplete="off">
          <el-input v-model="registerForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword" autocomplete="off">
          <el-input v-model="registerForm.checkPassword" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" style="padding: 0" class="dialog-footer">
        <el-button style="margin: 0 15px 0 0" @click="resetForm('registerForm')"
          >重 置</el-button
        >
        <el-button
          type="primary"
          style="margin: 0"
          @click="submitForm('registerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
#bg {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  min-height: 460px;
}
#login {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //border: #fff 1px solid;
  text-align: center;
  width: 60%;
  height: 60%;
  max-height: 558px;
  //max-width: 500px;
  margin: auto;
  //padding: 50px;
  //opacity: 0.95;
  //box-shadow: 0 0 10px 2px;
  border-radius: 8px;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
  min-height: 510px;
  .el-input {
    position: relative;
    width: 50%;
    //margin: auto;
  }
}
.l-content1 {
  //display: flex;
  //float: left;
  position: relative;
  //border: #f00 1px solid;
  width: 40%;
  //height: 100%;
  padding: 75px 0;
  background-color: white;
  border-radius: 8px 0 0 8px;
}
.r-content1 {
  //float: right;
  position: relative;
  //border: #00f 1px solid;
  width: 60%;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
}

@media screen and (max-width: 1314px) {
  #login {
    box-shadow: none;
  }
  .l-content1 {
    width: 100%;
    min-width: 350px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
  }
  .r-content1 {
    display: none;
    width: 0;
  }
}
.rcImg {
  position: relative;
  //height: 100%;
  //width: 100%;
  object-fit: cover;
}
#buttons {
  padding: 15px 60px;
  height: auto;
  margin-top: 50px;
}

//.el-button{
//  //margin: 15px 10px;
//  margin: 0 15px 15px 0;
//}
</style>

<style lang="less">
.registerDialog {
  .el-dialog__body {
    padding: 25px 60px 0 60px;
  }
}
.loginForm {
  .el-form-item__error {
    position: absolute;
    top: 100%;
    left: 30%;
  }
}
.inputVC {
  width: calc(100% - 80px);
}
</style>

<script>
import userApi from "@/api/user";
export default {
  name: "LoginView",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length > 12 || value.length < 5) {
        callback(new Error("密码长度需要在5-12位"));
      } else {
        if (this.registerForm.checkPassword !== "") {
          this.$refs.registerForm.validateField("checkPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerDialogVisible: false,
      loginForm: {
        userId: "",
        password: "",
      },
      registerForm: {
        userId: "",
        password: "",
        checkPassword: "",
      },
      loginRules: {
        userId: [
          // { required: true, message: '请输入账户', trigger: 'blur' }
          // ,
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      registerRules: {
        userId: [
          // { required: true, message: '请输入账户', trigger: 'blur' }
          // ,
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      rcHeight: {
        offsetHeight: "",
      },
      imgUrl: [
        { id: 0, idView: require("@/assets/images/header.png") },
        // { id: 1, idView: require('../assets/RotationChartPic/rc2.jpeg') },
        // { id: 2, idView: require('../assets/RotationChartPic/rc3.jpeg') }
      ],
    };
  },
  mounted() {
    this.imgLoad();
    window.addEventListener(
      "resize",
      () => {
        this.rcHeight = this.$refs.rcHeight.offsetHeight;
        this.imgLoad();
      },
      false
    );
  },
  methods: {
    handleRegisterClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs.registerForm.resetFields();
          done();
        })
        .catch((_) => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var registerInfo = {
            userId: this.registerForm.userId,
            password: this.registerForm.password,
          };
          userApi.register(registerInfo).then((response) => {
            this.$message({
              type: "success",
              message: "注册成功!",
            }); // 刷新页面
            this.loginForm.userId = this.registerForm.userId;
          });
          // this.loginForm.userId = this.registerForm.userId
          this.$refs.loginForm.clearValidate();
          this.$refs[formName].resetFields();
          this.registerDialogVisible = false;
        } else {
          // this.$refs.registerForm.clearValidate();
          alert("注册信息有误!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch("user/login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" });
          });
          // eslint-disable-next-line no-empty
        } else {
        }
      });
    },
    imgLoad() {
      this.$nextTick(() => {
        this.rcHeight = this.$refs.rcHeight.offsetHeight;
      });
    },
  },
};
</script>
